<template>
  <div class="personal-chat-project">
    <div class="personal-head">
      <div class="personal-head-title">个人中心</div>
    </div>
    <div class="personal-content">
      <div class="personal-content-form">
        <el-form :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="头像：">
                <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  :http-request="uploadAvatar"
                  accept=".jpg, .png, .jpeg">
                  <el-avatar :src="userAvatar" class="avatar" :size="100" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名：" prop="nickName">
                <el-input v-model="form.nickName" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话：" prop="phonenumber">
                <el-input v-model="form.phonenumber" placeholder="请输联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱地址：" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getAvatar, getUserProfile, updateAvatar, updateUserProfile } from '@/assets/api/user'
import useUser from '@/store/user'
import defaultAvatar from '@/assets/image/logo.png'
import { ElMessage } from 'element-plus'

const userStore = useUser()
const userAvatar = ref(defaultAvatar)

const getAvatarFunc = () => {
  getAvatar(userStore.userId).then((res) => {
    if (res.code === 200) {
      userAvatar.value = res.data
    }
  })
}
getAvatarFunc()

const form = ref({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  avatar: '',
  emGender: '0',
})

const rules = ref({
  nickName: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change'],
    },
  ],
  phonenumber: [
    { required: true, message: '手机号码不能为空', trigger: 'blur' },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
})

const onSubmit = () => {
  updateUserProfile(form.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const getUserInfo = () => {
  getUserProfile().then((res) => {
    if (res.code === 200) {
      form.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
getUserInfo()

const uploadAvatar = (params) => {
  const formData = new FormData()
  formData.append('avatarFile', params.file)

  updateAvatar(userStore.userId, formData).then((res) => {
    if (res.code === 200) {
      getAvatarFunc()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<style lang="scss" scoped>
.personal-chat-project {
  height: 100%;
  background-color: var(--elp-bg-color);
  border-radius: 12px;
  padding: 20px;
  .personal {
    &-head {
      width: 100%;
      height: 30px;
      @include use-flex(normal, space-between, row);
      &-title {
        font-size: 18px;
        font-weight: 700;
      }
    }
    &-content {
      width: 100%;
      @include use-flex(normal, margin-left);
      height: calc(100% - 40px);
      overflow: auto;
      &-form {
        margin-left: 10%;
        width: 50%;
        .emContactStyle {
          width: 100%;
          display: flex;
          /* align-items: center; */
        }
        .avatar {
          //width: 100px;
        }
      }
    }
  }
}
</style>
